<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        用户:<input type="text" v-model="msg">
        需求:<input v-focus type="text"> 
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <script type="text/javascript">
        /* 
            输入的两个参数 id就是指的id(v-if,v-for),definition是指的定义对象,
            其中定义对象可以提供一些钩子函数 Vue.directive('id',{})
        */
        //定义全局指令
        Vue.directive('focus',{
            /* 
                el:指令属性所在的标签元素
                binding:包含指令相关的数据的对象
            */
            inserted:function(el,binding,vncode){
                console.log(el);
                console.log(binding);
                console.log(vncode);
                el.focus();
            }
        })
        var vm = new Vue({
            el:'#app',
            data: {
                msg:'我在上海学vue'
            }
        });
    </script>
</body>
</html>